<template>
	<view class="maintenance">
		<toSafe :bgColor="'#fff'"></toSafe>
		<view class="searchInput">
			<view class="search-top">
				<view class="icon" @click="HandleReturn">
					<uni-icons type="left" size="30" style="margin-right: 20rpx;"></uni-icons>
				</view>
				<view class="title">客户维保信息</view>
			</view>
			<!-- <view class="search_icons">
				<view class="icon">
					<uni-icons type="search" size="20" color="#797979"></uni-icons>
				</view>
				<input class="uni-input" focus v-model="keyword" placeholder="搜索" />
				<view @click="search" class="search">搜索</view>
			</view> -->
		</view>
		<view class="maintenance-body">
			<!-- 用户信息 -->
			<view class="body-info">
				<text class="title">{{customerInfo.entName}}</text>
				<view class="message">
					{{customerInfo.remark}}
				</view>
				<view class="focus">
					<text class="focus-label">是否重点客户</text>
					<text class="focus-value">{{customerInfo.clientType ==1?'普通客户':'重点客户' }}</text>
				</view>
				<view class="focus">
					<text class="focus-label">客户类型</text>
					<text class="focus-value">{{typeList[customerInfo.entType]}}</text>
				</view>
				<view class="focus">
					<text class="focus-label">维保开始时间</text>
					<text class="focus-value">{{customerInfo.itemMaintenanceValidityStart}}</text>
				</view>
				<view class="focus">
					<text class="focus-label">合同结束时间</text>
					<text class="focus-value">{{customerInfo.contractValidityEnd}}</text>
				</view>
				<view class="building-info">
					<view class="building-title">建筑信息</view>
					<text class="building-text">{{customerInfo.entAddress}}</text>
					<!-- 			<uni-table border emptyText="暂无更多数据">
						<uni-tr>
							<uni-td align="center">A栋</uni-td>
							<uni-td align="center">23层</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">B栋</uni-td>
							<uni-td align="center">22层</uni-td>
						</uni-tr>
					</uni-table> -->
				</view>
			</view>
			<!-- 历史记录 -->
			<view class="history">
				<view class="history-title">
					维保服务历史记录
				</view>
				<view class="history-body">
					<!-- <scroll-view scroll-y="true" class="scroll-Y">
						<view class="history-item" v-for="item in customerInfo.wbPlanVosList" :key="item.id">
							<view class="item-top">
								<text class="item-time">{{item.planStartDate}}</text>
								<text style="#28C445" v-if="item.execStatus == 1">进行中</text>
								<text style="#28C445" v-else-if="item.execStatus == 2">已提交</text>
								<text style="#FF8A00" v-else-if="item.execStatus == 3">待审批</text>
								<text style="#28C445" v-else-if="item.execStatus == 4">驳回</text>
								<text style="#28C445" v-else-if="item.execStatus == 5">已维保</text>
								<text style="#28C445" v-else-if="item.execStatus == 6">已完成</text>
								<text style="color: #325EF5;" v-else>待开始</text>
							</view>
							<view class="item-label">{{item.planName}}</view>
							<view class="item-type">{{item.planType ?? '暂无类型'}}</view>
							<view class="item-maintenance">
								{{item.wbCompanyName}}
							</view>
							 v-if="item.execStatus == 6" 
							<up-button @click="downLoad(item.id)" class="download">去下载</up-button>
						</view>
					</scroll-view> -->
					<Tasks :type='0' ref="scrollableContainer" :innerHeight="'calc(100vh - 400px)'" :lists="dataLists"
						:isLoading="isLoading" @scroll="scrollHandler"></Tasks>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCustomersInfo,
		downLoadInfo
	} from '@/api/customers.js'
	import {
		getTaskLists
	} from '@/api/maintenance.js'
	import toSafe from '@/compoents/top-safe.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	// 建筑信息列表
	const tableData = reactive([{
		text: "A", //显示
		value: "" // 值
	}])

	const typeList = reactive({
		'1': '政企单位',
		'2': '教育医疗',
		'3': '餐饮娱乐',
		'4': '民用建筑',
		'5': '商业综合体',
		'6': '工业类',
	})
	let customerInfo = reactive({})
	let dataLists = reactive([])
	let isLoading = ref(false)
	let scrollTop = ref(0)
	const clientId = ref(0)
	onLoad(options => {
		clientId.value = options.id
		getCustomerData(options.id)
		getList()
	})

	// 获取客户维保信息
	const getCustomerData = id => {
		getCustomersInfo(id).then(res => {
			if (res.code == 200) {
				Object.assign(customerInfo, res.data)
			}
		})
	}

	// 下载维保信息
	const downLoad = id => {
		uni.downloadFile({
			url: `http://192.168.1.16:8080/wb/app/wbPlan/accomplish?planId=${id}`,
			success: (res) => {
				if (res.statusCode === 200) {

					uni.saveFile({
						tempFilePath: res.tempFilePath,
						success: function(res) {
							var savedFilePath = res.savedFilePath;
						}
					});

					// 下载成功，获取文件临时路径  
					const tempFilePath = res.tempFilePath;
					// 你可以在这里将文件路径传递给其他API，比如uni.saveFile（如果支持）或者显示图片  
					console.log('下载成功，文件路径：', tempFilePath);

					// 如果需要保存文件到应用沙盒，可以使用uni.saveFile（但注意某些平台可能不支持）  
					// uni.saveFile({
					// 	tempFilePath: tempFilePath,
					// 	success: (saveRes) => {
					// 		console.log('文件保存成功：', saveRes.savedFilePath);
					// 	},
					// 	fail: (err) => {
					// 		console.error('文件保存失败：', err);
					// 	}
					// });

					// 或者直接显示图片  
					// this.imageSrc = tempFilePath; // 假设你在data中定义了一个imageSrc变量用于绑定图片  
				}
			},
			fail: (err) => {
				console.error('下载失败：', err);
			}
		});
		// downLoadInfo(id).then(res => {
		// 	if (res.code == 200) {

		// 	}
		// })
	}
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	//获取维保历史记录
	const getList = (id = 10) => {
		isLoading.value = true
		getTaskLists('', {
			"clientId": clientId.value
		}).then(res => {
			if (res.code == 200) {
				dataLists.splice(0, dataLists.length, ...res.rows)
			}
			isLoading.value = false
			uni.stopPullDownRefresh()
		}).catch(() => {
			uni.stopPullDownRefresh()
		})
	}
	const scrollHandler = e => {}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.maintenance {
		width: 100%;
		height: 100%;
		background: #F6F8FA;
		overflow: hidden;

		.searchInput {
			width: 100%;
			height: 88rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background-color: #fff;

			// position: fixed;
			// top: 0;
			// left: 0;
			padding: 0 20rpx;
			z-index: 99;

			.search-top {
				.inline_center();
				height: 88rpx;
				width: 100%;
				// display: flex;
				// align-items: center;

				.icon {
					width: 10vw;
					height: 88rpx;
					line-height: 88rpx;
					z-index: 1;
				}

				.title {
					width: 90vw;
					line-height: 88rpx;
					height: 88rpx;
					text-align: center;
					margin-left: -8vw;
					font-size: 34rpx;
					font-weight: 700;
				}
			}

			.search_icons {
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}

		}

		.maintenance-body {
			padding: 20rpx 28rpx;

			.body-info {
				width: 100%;
				background-color: #fff;
				padding: 20rpx 24rpx;
				display: flex;
				.inline_column_space_around();

				.title {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.message {
					font-size: 24rpx;
					margin-bottom: 30rpx;
					opacity: 0.6;
					line-height: 1.6
				}

				.focus {
					.inline_space_between();
					margin-bottom: 30rpx;
					font-size: 30rpx;

					.focus-label {
						opacity: 0.6;
					}
				}

				.building-info {
					width: 100%;

					.building-title {
						font-size: 30rpx;
						margin-bottom: 20rpx;
					}

					.building-text {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						color: #666666;
					}
				}
			}

			.history {
				margin-top: 40rpx;

				.history-title {
					font-size: 32rpx;
					font-weight: bold;
					padding-bottom: 20rpx;
				}

				.history-body {
					.scroll-Y {
						height: 33vh;
					}

					.history-item {
						width: 100%;
						height: 222rpx;
						margin-bottom: 20rpx;
						padding: 20rpx 24rpx;
						background-color: #fff;
						border-radius: 12rpx;
						position: relative;

						.item-top {
							.inline_space_between();
							margin-bottom: 4rpx;

							text:nth-child(1) {
								font-size: 24rpx;
								opacity: 0.8;
							}

							text:nth-child(2) {
								font-size: 28rpx;
								color: #325EF5;
							}
						}

						.item-label {
							font-size: 28rpx;
							font-weight: bold;
							margin-bottom: 10rpx;
						}

						.item-type {
							font-size: 24rpx;
							color: #325EF5;
							margin-bottom: 20rpx;
						}

						.item-maintenance {
							font-size: 24rpx;
							opacity: 0.8;
						}

						.download {
							position: absolute;
							right: 24rpx;
							bottom: 20rpx;
							width: 134rpx;
							height: 54rpx;
							box-sizing: inherit;
							padding: 10rpx 31rpx;
							border-radius: 12rpx;
							background-color: #fff;
							border: 1px solid #325ef5;
							color: #325ef5;
						}
					}

				}
			}
		}



		.search-placeholder {
			width: 100%;
			height: 60rpx;
			background-color: #cfd9f9;
			font-size: 28rpx;
			color: #325EF5;
			text-align: center;
			line-height: 60rpx;
		}


		.uni-list {
			height: 80rpx;
		}
	}

	.uni-group {
		display: flex;
		align-items: center;
	}
</style>